<template>
   <label class="needsclick">
  <div class="radio">
    <input type="radio" v-model="current" 
    :value='inputValue'
    class="radio-check">
    <i class="radio-checked"></i>
  </div>
  <div class="radio-text">
    <slot></slot>
  </div>
  </label>
</template>

<script>
export default {
  name: 'xlRaido',
  props:['value','inputValue'
  ],
  data () {
    return {
      current:this.value
    }
  },
    watch: {
      value (val){
          this.current = val
      },
      'current' (val) {
        this.$emit('input',val)
      }
    }
}
  
</script>

<style lang="scss" scoped>
@import '../sass/mixin.scss';
label {
  font-size: 30px;/*px*/
  &:first-child {
    margin-left: -20px;
  }
  @include flex();
  padding:0 40px 0 0; // margin-left:-20px;
  .radio {
    .radio-checked {
      display: inline-block;
      vertical-align: middle;
      font: normal normal normal 14px/1 "weui";
      font-size: inherit;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      margin-right: 10px;
      font-size: 30px;
      /*px*/
    }
    .radio-check {
      display: none;
      &:checked+.radio-checked {
        &:before {
          content: '\EA06';
          color: #fb4700;
        }
      }
    }
    .radio-checked:before {
      content: '\EA01';
      color: #C9C9C9;
      font-size: 30px;
      /*px*/
      display: inline-block;
      margin-left: .2em;
      margin-right: .2em;
    }
  }
}

</style>